<template>
  <a-modal :open="open" width="950px" title="新增押金单" centered :footer="false" @cancel="onCancel">
    <div class="flex">
      <div class="w-1/2 pr-2">
        <SelectTable
          v-model:value="formState.brName"
          type="押金患者"
          placeholder="姓名/助记码/卡号/手机号/证件号码"
          custom-input
          :maxlength="20"
          empty-close
          @select="onSelectPatient"
        />
        <UserCard :user-data="formState" class="mt-3">
          <div class="flex flex-col justify-between px-5">
            <div class="flex justify-between items-center mt-2">
              <LabelValue label-align="right" :label-width="120" label="负责人" :value="formState.brFzrName" />
              <LabelValue label-align="right" :label-width="120" label="咨询师" :value="formState.brZxsName" />
            </div>
            <a-descriptions class="mt-3" :column="1">
              <a-descriptions-item label="关注项目" class="w-full pb-5">
                <a-select
                  v-model:value="formState.brZlxm"
                  class="w-full"
                  placeholder="请选择"
                  :options="interestProject"
                  allow-clear
                  mode="multiple"
                  :max-tag-count="2"
                  @change="onChangeSelect"
                />
              </a-descriptions-item>
              <a-descriptions-item label="客户来源" class="w-full">
                <SelectCustomerSource v-model:value="formState.brly" @change="onChangeSelect" />
              </a-descriptions-item>
            </a-descriptions>
            <a-form-item class="w-full">
              <CustomerLabel :br-id="formState.brId" />
            </a-form-item>
          </div>
        </UserCard>
      </div>
      <div class="w-1/2 h-[320px]">
        <a-form :model="formState" class="form-style-flex">
          <!-- <a-form-item label="押金用途" class="w-full">
            <a-select
              v-model:value="formState.zzys"
              :options="depositDoctor"
              placeholder="请选择"
              :field-names="{ label: 'pathName', value: 'id' }"
              @focus="getExpressMode"
              @change="onChangexpressMode"
            />
          </a-form-item> -->
          <a-form-item label="押金金额" v-bind="validateInfos.dpJe" class="w-full">
            <a-input v-model:value="formState.dpJe" v-input:float.2 placeholder="0.00" class="text-right">
              <template #prefix> <span class="text-gray-400">￥</span> </template>
            </a-input>
          </a-form-item>
          <a-form-item label="备注" class="w-full">
            <a-textarea v-model:value="formState.memo" :rows="10" placeholder="请输入" />
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="mt-2 flex justify-end">
      <a-button @click="onClickReset">重置</a-button>
      <a-button type="primary" class="ml-4" @click="onOk">收费</a-button>
    </div>
    <ChargeModal
      v-model:open="chargeOpen"
      :is-discount="false"
      :is-dispose="false"
      :br-id="formState.brId"
      :business-data="{ ysje: formState.dpJe }"
      @success="onSuccessPrice"
    />
    <TagsModal v-model:open="openTagsModal" :tag-data="tagsList" @success="onSelectTags" />
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import SelectTable from '@/components/SelectTable'
// import LabelValue from '@/components/LabelValue'
import UserCard from '@/components/UserCard'
import TagsModal from '@/components/business/TagsModal'
import CustomerLabel from '@/components/CustomerLabel'
import ChargeModal from '@/components/ChargeModal'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  patientInfo: {
    type: Object,
    default: () => ({})
  }
})
const chargeOpen = ref(false)
const openTagsModal = ref(false)
const formState = ref({ dpJe: '' })
const interestProject = ref([])
const rulesState = ref({
  dpJe: [{ required: true, message: '请输入押金金额' }]
})
// isCompleted
const { resetFields, validateInfos } = useForm(formState, rulesState)
const onSelectPatient = async (select) => {
  formState.value = select
}

const getInterestProject = async () => {
  const { data, code } = await post('/operation/opex/getDictFocusItemList', { zjm: '' })
  if (code !== 0) return message.error(code || '获取数据失败')
  interestProject.value = data.map((item) => {
    return {
      label: item.itemName,
      value: item.id
    }
  })
}
const onChangeSelect = async () => {
  if (formState.value.brName) {
    formState.value.jksy = 0
    const res = await post('/common/patient/savePatientInfo', formState.value)
    if (res.code !== 0) return message.error(res.msg)
  }
}

const onClickReset = () => {
  formState.value = {}
}
const onOk = async () => {
  if (!formState.value.brName) return message.error('姓名不能为空')
  if (!formState.value.dpJe) return message.error('押金不能为空')
  chargeOpen.value = true
}
const onSuccessPrice = async (params) => {
  const { code, msg } = await post(
    params.zffs === '2' ? '/outp/mzdj/doPaymentForScanYJ' : '/outp/mzdj/saveDepositSlipSg',
    {
      sflb: 'SG',
      brId: formState.value.brId,
      itemName: formState.value.itemName,
      brLy: formState.value.brLy,
      dpJe: formState.value.dpJe,
      memo: formState.value.memo,
      ...params,
      ooOpticianRecordLsh: []
    },
    {
      timeout: 2 * 60 * 1000 // 超时时间2分钟
    }
  )
  if (code !== 0) return message.error(msg)
  message.success('保存成功')
  chargeOpen.value = false
  emit('success')
  onCancel()
}

const onCancel = () => {
  emit('update:open', false)
  resetFields()
  // formState.value = {}
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      getInterestProject()
      onClickReset()
      formState.value = props.patientInfo
    }
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
.ant-descriptions {
  :deep(.ant-descriptions-item-label) {
    padding-top: 3px;
  }
}
// .tag-item {
// min-width: 70px;
// padding: 4px 8px;
// font-size: 14px;
// text-align: center;
// background-color: var(--thin-color);
// }
.ant-tag-checkable-checked {
  color: #fff;
  background-color: var(--primary-color);
}
</style>
